<!-- 我的消息 -->
<template>
  <div class="my-notice">
    <!-- 标签页切换 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="1">
        <div slot="label">
          <el-badge :is-dot="isProjectCount" class="nav-el-badge-item">项目消息</el-badge>
        </div>
      </el-tab-pane>
      <el-tab-pane name="2">
        <div slot="label">
          <el-badge :is-dot="isSystemCount" class="nav-el-badge-item">系统消息</el-badge>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-table
      style="width: 100%"
      :data="listData"
      :show-header="false"
      @row-click="rowClick"
      :row-class-name="rowClassName"
    >
      <el-table-column prop="title" align="left" width="120">
        <template slot-scope="scope">{{scope.row.title}}</template>
      </el-table-column>
      <el-table-column prop="content" align="left">
        <template slot-scope="scope">
          {{scope.row.content}}
          <!-- {{scope.row.title}}，点击
          <span
            class="noticeContent"
            @click="herfto('propsTrade/tradeinfo',row)"
          >查看详情>></span> -->
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" width="100"></el-table-column>
    </el-table>
    <el-row type="flex" justify="center" style="margin-top:20px">
      <el-pagination
        :hide-on-single-page="true"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>


<script>
import {getNoticeList, getNewNotice, setAllNoticeRead} from '@/api/profiles'

export default {
  name: 'MyNotice',
  components: {},
  props: ['myNavItemCom'],
  data() {
    return {
      activeName: this.myNavItemCom.type || '1',
      isTotal: false,
      isProjectCount: false,
      isSystemCount: false,
      current: 1,
      size: 10,
      total: 0,
      listData: null
    }
  },
  computed: {},
  methods: {
    getNew() {
      getNewNotice().then(res => {
        let {
          data: {projectCount, systemCount, total}
        } = res
        if (projectCount > 0) {
          this.isProjectCount = true
        } else {
          this.isProjectCount = false
        }
        if (systemCount > 0) {
          this.isSystemCount = true
        } else {
          this.isSystemCount = false
        }
      })
    },
    getList() {
      getNoticeList(Object.assign({}, {type: this.activeName, pageSize: this.size, pageNo: this.current})).then(res => {
        let {
          data: {
            code,
            success,
            result: {current, size, total, records},
            message
          }
        } = res
        if (code == 200 && success) {
          this.current = current
          this.size = size
          this.total = total
          this.listData.push(...records)
        }
      })
    },
    handleCurrentChange(val) {
      this.listData = []
      this.getList()
    },
    handleClick() {
      this.listData = []
      this.current = 1
      this.getList()
    },
    rowClassName({row, rowindex}) {
      if (row.isRead == 1) {
        return 'read'
      }
    },
    rowClick(row, column, event) {
      let item = {
        navIndex: 3,
        type: this.activeName,
        ...row
      }
      this.herfto('profiles', item)
    },
    herfto(name, item) {
      this.$router.push({
        path: `/${name}`,
        query: {
          ...item
        }
      })
    }
  },
  activated() {
    this.listData = []
    this.getNew()
    this.getList()
  },
  created() {},
  mounted() {}
}
</script>


<style lang='less' scoped>
.nav-el-badge-item {
  line-height: 16px;
}
.see-info {
  color: #0d2d77;
}
.noticeContent {
  color: #0e2e78;
  white-space: nowrap;
}
</style>